<template>
	<view class="my_padding">
		<view class="my_body">
			<div class="title-top">
				<div style="flex; align-items: center;">
					<view class="rule"><span @click="showInviteIncome">收益明细</span></view>
					<view class="uni-media-list-logo phto">
						<image :src="avatar" :lazy-load="true" />
					</view>
					<view class="user_level">{{userinfo.level_name}}</view>
					<view class="header-msg">
						<view class="header-msg-bottom">{{ userinfo.username }}</view>
						<view class="head_data">
							<view class="data_item">
								<view class="item_number">{{ teamInfo.todaySubordinates }}</view>
								<view class="item_tit">今日新增</view>
							</view>
							<view class="data_item">
								<view class="item_number">{{teamInfo.tjrs}}</view>
								<view class="item_tit">我的伙伴</view>
							</view>
							<view class="data_item">
								<view class="item_number">{{ teamInfo.subordinateCount }}</view>
								<view class="item_tit">我的团队</view>
							</view>
						</view>
					</view>
					
					<view class="mid_data">
						<view class="mid_data_item">
							<view class="mid_item_number">{{teamInfo.todayfirstrecharge}}</view>
							<view class="mid_item_tit">成功</view>
						</view>
						<view class="mid_data_item">
							<view class="mid_item_number">{{teamInfo.todayauth}}</view>
							<view class="mid_item_tit">认证</view>
						</view>
						<view class="mid_data_item">
							<view class="mid_item_number">{{teamInfo.todayreg}}</view>
							<view class="mid_item_tit">注册</view>
						</view>
						<view class="mid_data_item">
							<view class="mid_item_number">￥{{teamInfo.todayinvest}}</view>
							<view class="mid_item_tit">今日</view>
						</view>
						<view class="mid_data_item">
							<view class="mid_item_number">￥{{teamInfo.allinvest}}</view>
							<view class="mid_item_tit">总计</view>
						</view>
					</view>
				</div>
			</div>
			
			<view class="day_data" style="margin-top:6px;">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-with-animation>
					<!-- <view class="scroll-view-item_H" v-for="(tab,index) in tabBars"
						:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view> -->
						<view class="scroll-view-item_H" 
							:class="navIndex==0 ? 'activite' : ''" @click="checkIndex(0)">今日（{{ todayCount }}）</view>
						<view class="scroll-view-item_H"
							:class="navIndex==1 ? 'activite' : ''" @click="checkIndex(1)">一级（{{ memberCount1 }}）</view>
						<view class="scroll-view-item_H"
							:class="navIndex==2 ? 'activite' : ''" @click="checkIndex(2)">二级（{{ memberCount2 }}）</view>
						<view class="scroll-view-item_H"
							:class="navIndex==3 ? 'activite' : ''" @click="checkIndex(3)">三级（{{ memberCount3 }}）</view>
				</scroll-view>
				<!-- 内容切换 -->
				<view class="content" v-if="navIndex==0">
					<view v-if="todayList.length > 0">
						<view class="con_item" v-for="(item,index) in todayList">
							<image class="con_img" :src="weburl+item.avatar" :lazy-load="true" />
							<view class="con_name">{{item.username}}</view>
							<view class="con_level">{{item.level}}</view>
							<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
							  {{ item.auth === 1 ? '已实名' : '未实名' }}
							</view>
							<view class="con_date">注册时间：{{item.create_time}}</view>
							<view class="con_number">团队人数：{{item.team_size}}</view>
							<view class="con_gongxian">贡献收入：{{item.value}}</view>
							<view class="con_recharge">总充值：{{item.allrecharge}}</view>
							<view class="con_withdraw">总提现：{{item.allcash}}</view>
							<view class="con_income">总收益：{{item.income}}</view>
						</view>
					</view>
					<view v-else class="con_nomore">
						<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
						<view class="con_nomore_tit">没有更多了</view>
					</view>
				</view>
				<view class="content" v-if="navIndex==1">
					<view v-if="memberListLevel1.length > 0">
						<view class="con_item" v-for="(item,index) in memberListLevel1">
							<image class="con_img" :src="weburl+item.avatar" :lazy-load="true" />
							<view class="con_name">{{item.username}}</view>
							<view class="con_level">{{item.level}}</view>
							<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
							  {{ item.auth === 1 ? '已实名' : '未实名' }}
							</view>
							<view class="con_date">注册时间：{{item.create_time}}</view>
							<view class="con_number">团队人数：{{item.team_size}}</view>
							<view class="con_gongxian">贡献收入 {{item.value}}</view>
							<view class="con_recharge">总充值：{{item.allrecharge}}</view>
							<view class="con_withdraw">总提现：{{item.allcash}}</view>
							<view class="con_income">总收益：{{item.income}}</view>
						</view>
					</view>
					<view v-else class="con_nomore">
						<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
						<view class="con_nomore_tit">没有更多了</view>
					</view>
				</view>
				<view class="content" v-if="navIndex==2">
					<view v-if="memberListLevel2.length > 0">
						<view class="con_item" v-for="(item,index) in memberListLevel2">
							<image class="con_img" :src="weburl+item.avatar" :lazy-load="true" />
							<view class="con_name">{{item.username}}</view>
							<view class="con_level">{{item.level}}</view>
							<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
							  {{ item.auth === 1 ? '已实名' : '未实名' }}
							</view>
							<view class="con_date">注册时间：{{item.create_time}}</view>
							<view class="con_number">团队人数：{{item.team_size}}</view>
							<view class="con_gongxian">贡献收入 {{item.value}}</view>
							<view class="con_recharge">总充值：{{item.allrecharge}}</view>
							<view class="con_withdraw">总提现：{{item.allcash}}</view>
							<view class="con_income">总收益：{{item.income}}</view>
						</view>
					</view>
					<view v-else class="con_nomore">
						<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
						<view class="con_nomore_tit">没有更多了</view>
					</view>
				</view>
				<view class="content" v-if="navIndex==3">
					<view v-if="memberListLevel3.length > 0">
						<view class="con_item" v-for="(item,index) in memberListLevel3">
							<image class="con_img" :src="weburl+item.avatar" :lazy-load="true" />
							<view class="con_name">{{item.username}}</view>
							<view class="con_level">{{item.level}}</view>
							<view class="con_sm" :class="{ 'auth-green': item.auth === 1, 'auth-gray': item.auth === 0 }">
							  {{ item.auth === 1 ? '已实名' : '未实名' }}
							</view>
							<view class="con_date">注册时间：{{item.create_time}}</view>
							<view class="con_number">团队人数：{{item.team_size}}</view>
							<view class="con_gongxian">贡献收入 {{item.value}}</view>
							<view class="con_recharge">总充值：{{item.allrecharge}}</view>
							<view class="con_withdraw">总提现：{{item.allcash}}</view>
							<view class="con_income">总收益：{{item.income}}</view>
						</view>
					</view>
					<view v-else class="con_nomore">
						<image class="con_nomore_img" src="/static/images/bg_nodata.png" :lazy-load="true" />
						<view class="con_nomore_tit">没有更多了</view>
					</view>
				</view>
				<view v-show="isShowBox" class="profit_box">
					<view class="profit_bar">
						<view class="profit_tit">团队收益</view><view class="close" @click="choseBox">✕</view>
					</view>
					<view class="profit_contain" @scroll="handleScroll">
						<view class="det_item" v-for="(item, index) in list" :key="index">
							<view class="det_tit">{{item.reason}}</view>
							<view class="det_time">{{item.create_time}}</view>
							<view class="det_money"><span>{{item.money}}</span>元</view>
						</view>
					</view>
					<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				</view>
				<view class="cover" v-show="isShowBox"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import nTable from '@/components/n-table/n-table.vue';
	import {baseColumns, treeColumnsData} from "@/common/tableData.js"
	export default {
		components:{
			nTable
		},
		data() {
			return {
				list:[],
				ifOnShow:false,
				isShowBox: false,
				headerOpt: {},
				tableDataTree: false,
				columns: false,
				total_cash:0,
				total_investment:0,
				total_members:0,
				total_recharge:0,
				total_zhitui:0,
				total_waitmoney:0,
				userinfo:[],
				avatar: '',
				navIndex: 0,
				level: 0,
				tabBars: [{
					name: '今日（0）',
				},{
					name: '一级（0）',
				},{
					name: '二级（0）',
				},{
					name: '三级（0）',
				}],
				teamInfo: [],
				todayList:[],
				memberListLevel1:[],
				memberListLevel2:[],
				memberListLevel3:[],
				todayCount: 0,
				memberCount1: 0,
				memberCount2: 0,
				memberCount3: 0,
				inviteList: [],
				pageIndex: 1,
				pageSize: 10,
				totalPages: 0,
				page: 1,
				lastPage: 0,
				loadMoreText: "加载中...",
				showLoadMore: false,
				current: 1				
			};
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/detail?id=22',
			});	
		},		
		onLoad(option) {
			this.helper.checkLogin();
			this.getData();
		},
		mounted() {
			setTimeout(() => {
				this.columns = baseColumns
			}, 1000)
		},
		onReachBottom() {
			 //console.log("onReachBottom");
			if (this.page > this.lastPage) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}else{
				this.showLoadMore = true;
				setTimeout(() => {
					this.changeLevel(this.level);
				}, 300);
			}
		},
		methods: {
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			getData(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				console.log('info',info);
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
					this.helper.req({
						api:"getTeamInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
							var level = res.data.data.teamList.total
							this.teamInfo = res.data.data.teamInfo
							this.todayCount = this.teamInfo.todaySubordinates
							this.memberCount1 = level.level1;
							this.memberCount2 = level.level2;
							this.memberCount3 = level.level3;
							uni.hideLoading();
					})
					
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						// console.log('userInfo参数:', this.userinfo)
						this.userinfo = res.data.data.userinfo;
						if (this.userinfo.avatar) {
							this.avatar = this.weburl + this.userinfo.avatar;
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 300);
					})
				}else{
					uni.hideLoading();
				}
			},
			checkIndex(index) {
				this.page = 1,
				this.lastPage = 0,
				this.todayList=[],
				this.memberListLevel1=[],
				this.memberListLevel2=[],
				this.memberListLevel3=[],
				console.log('index',index)
				this.navIndex = index;
				this.changeLevel(index)
			},
			showInviteIncome(){
				this.isShowBox = true
				this.$nextTick(() => {
					const el = document.querySelector('.profit_contain');
					el.scrollTo(0,0)
				});
				this.checkInvite(0)
			},
			checkInvite(current){
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let page = this.page;
					if(current > 0){
						let page = current;
					}
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['page='+page, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getTeamInvite",
						timestamp: timestamp,
						data: {
							token: info.token,
							page:page,
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
					let current_page = res.data.data.list.current_page;
					let last_page = res.data.data.list.last_page;
					this.page = current_page + 1;
					this.lastPage = last_page;
					this.list = this.list.concat(res.data.data.list.data);
					if (this.page >= this.lastPage) {
						this.loadMoreText = "没有更多数据了!"
					}						
						uni.stopPullDownRefresh();
						uni.hideLoading();
					})
				} else {
					uni.hideLoading();
				}
			},
			choseBox(){
				this.isShowBox = false
				this.current = 1
			},
			handleScroll(event) {
				this.$nextTick(() => {
					const el = document.querySelector('.profit_contain');
					const offsetHeight = el.offsetHeight;
					el.onscroll = () => {
						const scrollTop = el.scrollTop;
						const scrollHeight = el.scrollHeight;
						if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
							// 触达底部
							let current = this.current;
							current++;
							this.checkInvite(current)
							console.log('current:',current)
							this.current = current
						}
					};
				});
			},									
			changeLevel: function(index){
				var level = 0;
				if(index== 0){
					level = 0;
				}
				if(index == 1){
					level = 1;
				}else if(index == 2){
					level = 2;
				}else if(index == 3){
					level = 3;
				}
				this.level = level
				let page = this.page;
				console.log("level:",level)
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp,'level='+level,'page='+page]);
					this.helper.req({
						api:"getTeamInfo",
						timestamp:timestamp,
						data:{username:info.username,token:info.token,level:level,page:page},
						header:{sign:sign},
						method:'GET',
					}).then(res=>{
						var memberList = res.data.data.teamList.customers.data
						var levelcount = res.data.data.teamList.total
						let current_page = res.data.data.teamList.customers.current_page;
						let last_page = res.data.data.teamList.customers.last_page;
						this.page = current_page + 1;
						this.lastPage = last_page;
						if (index == 0){
						this.todayCount = res.data.data.teamInfo.todaySubordinates;
						this.todayList = this.todayList.concat(memberList);
						}else if(index == 1){
							this.memberListLevel1 = this.memberListLevel1.concat(memberList);
							this.memberCount1 = levelcount.level1;
						}else if(index == 2){
							this.memberListLevel2 = this.memberListLevel2.concat(memberList);
							this.memberCount2 = levelcount.level2;
						}else if(index == 3){
							this.memberListLevel3 = this.memberListLevel3.concat(memberList);
							this.memberCount3 = levelcount.level3;
						}
						uni.hideLoading();
					})
				}else{
					uni.hideLoading();
				}
			},
			scroll: function(e) {
				console.log(e)
				this.scrollTop = e.detail.scrollTop
			},
		},
	};
</script>

<style lang="scss">
	.padding {
		padding: 15px 11px;
		.team-head-info {
			height: auto;
			border-radius: 0.68rem;
			margin-bottom: 0rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			align-content: center;
			background: linear-gradient(186deg,rgba(255, 85, 0, 1.0) 0%, rgba(255, 170, 127, 1.0) 100%);
			box-shadow: 0.2048rem 0.191rem 0.32rem 0px rgba(16, 115, 195, 0.27);
		}
		.team-head-info .col {
			width: 33%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 3.4rem;
		}
		.team-head-info .b {
			word-break: break-all;
		}
		.team-head-info .b {
		  font-size: 1.04rem;
		  font-weight: 700;
		  letter-spacing: 0px;
		  line-height: 0.96rem;
		  color: #ffffff;
		  text-align: center;
		  vertical-align: top;
		  word-break: break-all;
		}
		.team-head-info p {
		  font-size: 0.88rem;
		  font-weight: 500;
		  letter-spacing: 0px;
		  line-height: 0.88rem;
		  color: #ffffff;
		  text-align: center;
		  vertical-align: top;
		}
		.ckgd {
			display: inline-block;
			width: 100%;
			padding-top: 0.5rem;
		}
	}
	
	.my_body{
		// padding: 3vw;
		background-color: #FFF;
		margin: 3vw;
		height: 80vw;
		border-radius: 3vw;
	}
	
	.my_padding {
		/* padding: 50px 15px 16px 15px; */
		/* padding: 12px; */
		/* display: flex; */
		min-height: 800px;
		background: #EEE;
		// background-image: url('@/static/images/person/top_background.png');
		// background-size: 100% 200px;
		// background-repeat: no-repeat;
		// background-size: cover;
	}
	
	.title-top {
		padding: 10px 6px;
		box-sizing: border-box;
		border-radius-left-bottom: 15px;
		border-radius-right-bottom: 15px;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	
	.uni-media-list-logo{
		width: 70px;
		height: 70px;
	}
	.uni-media-list-logo image{
		width: 70px; 
		height: 70px; 
		border-radius: 35px; 
		border:1px solid #CCC; 
		background: #FFF;
		position: absolute;
		left: 20px;
		top: 16px;
	}
	
	.header-msg{
		width: 60vw;
		position: absolute;
		top: 20px;
		left: 100px
	}
	.header-msg-bottom {
		color: #333;
		font-size: 5.2vw;
		font-weight: 600;
		line-height: 5.2vw;
		padding-left: 2vw;
	}
	.user_level{
		width: 70px;
		line-height: 20px;
		position: absolute;
		left: 20px;
		top: 94px;
		text-align: center;
		background: #fea829;
		color:#fff;
		border-radius: 12px;
	}
	
	.header-msg-top {
		line-height: 1;
		font-weight: 400;
		font-size: 3.8vw;
		margin-top: 2.4vw;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.head_data{
		width: 100%;
		height: 64px;
		border-bottom: 1px solid #CCC;
	}
	.data_item{
		width: 33%;
		line-height: 24px;
		text-align: left;
		font-size: 14px;
		padding-top: 10px;
		float: left;
		padding-left: 8px;
	}
	.item_number{
		color:#333;
		font-size: 16px;
	}
	.item_tit{
		color:#aaa;
	}
	
	.mid_data{
		width: 280px;
		height: 120px;
		position: absolute;
		top: 30vw;
		left: 4vw;
	}
	.mid_data_item{
		width: 70px;
		line-height: 24px;
		text-align: center;
		font-size: 16px;
		padding-top: 10px;
		float: left;
		padding-left: 8px;
		font-weight: bold;
		height: 80px;
	}
	.mid_item_number{
		color:#fe8f27;
		font-size: 18px;
		line-height: 32px;
	}
	.mid_item_tit{
		color:#333;
		font-size: 14px;
	}
	
	.my_score{
		position: absolute;
		line-height: 20px;
		height: 24px;
		right: 50px;
		top: 78px;
		padding: 2px 6px;
		background-color: #fff;
		color:#fea829;
		border-radius: 10px;
	}
	
	.day_data{
		padding: 3vw;
		background-color: #FFF;
		width: 94vw;
		min-height: 80vw;
		border-radius: 3vw;
		position: relative;
		top: 230px;
	}
	
	.con_item{
		width: 90vw;
		height: 35vw;
		margin-bottom: 2vw;
		padding: 2vw;
		position: relative;
		border: 1px solid #ef9308;
		border-radius: 5px;
	}
	.con_img{
		width: 60px;
		height: 60px;
		border-radius: 40px;
		border: 1px solid #CCC;
		position: absolute;
		top: 20px;
		left: 4px;
	}
	.con_img image{
		width: 60px; 
		height: 60px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.con_name{
		line-height: 40px;
		width: 80px;
		position: absolute;
		left: 20%;
		top: 10px;
		font-size: 16px;
	}
	.con_level{
		width: 70px;
		position: absolute;
		left: 52%;
		top: 16px;
		padding: 2px 6px;
		line-height: 20px;
		color:#fff;
		font-size: 13px;
		text-align: center;
		background: #fe8f27;
		border-radius: 12px;
	}
	.con_sm{
		width: 70px;
		position: absolute;
		left: 75%;
		top: 16px;
		padding: 2px 6px;
		line-height: 20px;
		color:#fff;
		font-size: 13px;
		text-align: center;
		background: #55EDB9;
		border-radius: 12px;
	}
	.auth-green {
	  background-color: green;
	  color: white; /* 可选：设置文本颜色为白色 */
	}

	.auth-gray {
	  background-color: gray;
	  color: white; /* 可选：设置文本颜色为黑色 */
	}	
	.con_date{
		position: absolute;
		left: 20%;
		top: 100px;
		line-height: 20px;
		color:#fff;
		font-size: 13px;
		color:#666;
	}
	.con_number{
		width: 70px;
		position: absolute;
		left: 20%;
		top: 50px;
		padding: 2px 0;
		line-height: 20px;
		color:#666;
		font-size: 10px;
		text-align: center;
		background: #eee;
		border-radius: 3px;
	}
	.con_gongxian{
		width: 90px;
		position: absolute;
		left: 42%;
		top: 50px;
		padding: 2px 0;
		line-height: 20px;
		color:#666;
		font-size: 10px;
		text-align: center;
		background: #eee;
		border-radius: 3px;
	}
	.con_recharge{
		width: 90px;
		position: absolute;
		left: 20%;
		top: 75px;
		padding: 2px 0;
		line-height: 20px;
		color:#666;
		font-size: 10px;
		background: #eee;
		text-align: center;
		border-radius: 3px;
	}
	.con_withdraw{
		width: 90px;
		position: absolute;
		left: 50%;
		top: 75px;
		padding: 2px 0;
		line-height: 20px;
		color:#666;
		font-size: 10px;
		text-align: center;
		background: #eee;
		border-radius: 3px;
	}
	.con_income{
		width: 90px;
		position: absolute;
		left: 72%;
		top: 50px;
		padding: 2px 0;
		line-height: 20px;
		color:#666;
		font-size: 10px;
		text-align: center;
		background: #eee;
		border-radius: 3px;
	}			
	.con_nomore{
		text-align: center;
	}
	
	.con_nomore_img{
		width: 8.96rem;
		height: 5.73rem;
		margin-top: 15vw;
	}
	.con_nomore_tit{
		line-height: 40px;
		font-size: 14px;
		margin-top: 20px;
		color:#999;
	}
	
	.scroll-view_H {
	    white-space: nowrap;
	    width: 100%;
	    color: #666;
	}
	 
	.scroll-view-item_H {
	    display: inline-block;
	    width: 25%;
	    /* height: 50rpx; */
	    line-height: 30px;
	    font-size: 14px;
	    text-align: center;
	    padding: 6px 0;
	}
	.activite {
	    color: #fea829;
	    font-size: 15px;
	    font-weight: bold;
	    border-bottom: 2px solid #fea829;
	    /* background-color: aliceblue; */
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
	    display: none
	}
    .rule{
      position: absolute;
      top: 12px;
      right: 12px;
    }
    .rule span{
      margin-left: 10px;
    }	
	.profit_box{
		width: 80vw;
		height: 160vw;
		position: fixed;
		top: 30vw;
		left: 10vw;
		background: #fff;
		border-radius: 4vw;
		border:0.5px solid #CCC;
		z-index: 2;
		
		.profit_bar{
			width: 80vw;
			height: 12vw;
			position: relative;
			border-bottom: 0.5px solid #DDD;
			
			.profit_tit{
				position: absolute;
				top: 0;
				left: 20vw;
				width: 40vw;
				height: 12vw;
				line-height: 12vw;
				font-size: 18px;
				font-weight: bold;
				text-align: center;
			}
			.close{
				width: 10vw;
				height: 12vw;
				line-height: 12vw;
				font-size: 18px;
				font-weight: bold;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.profit_contain{
			width: 80vw;
			height: 144vw;
			overflow-y: scroll;
			
			.det_item{
				padding: 3vw 3vw 0;
				position: relative;
				.det_tit{
					font-size: 12px;
					line-height: 30px;
				}
				.det_time{
					font-size: 12px;
					line-height: 24px;
					color:#666;
				}
				.det_money{
					width: 24vw;
					line-height: 10vw;
					text-align: center;
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 8px;
					span{
						font-size: 12px;
						color: #fa8600fa;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>